<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/键盘.css" />
    <title>输入键盘</title>
  </head>
  <div class="root">
      <!-- 主键盘 -->
      <div class="conter">
        <div class="f1">
          <ul>
            <li class="plate colA" data-a="Escape">Esc</li>
            <li style="visibility: hidden"></li>
            <li class="plate colB" data-a="F1">F1</li>
            <li class="plate colC" data-a="F2">F2</li>
            <li class="plate colC" data-a="F3">F3</li>
            <li class="plate colC" data-a="F4">F4</li>
            <li style="visibility: hidden"></li>
            <li class="plate colD" data-a="F5">F5</li>
            <li class="plate colE" data-a="F6">F6</li>
            <li class="plate colF" data-a="F7">F7</li>
            <li class="plate colG" data-a="F8">F8</li>
            <li style="visibility: hidden"></li>
            <li class="plate colH" data-a="F9">F9</li>
            <li class="plate colH" data-a="F10">F10</li>
            <li class="plate colI" data-a="F11">F11</li>
            <li class="plate colI" data-a="F12">F12</li>
          </ul>
        </div>
        <div class="f2">
          <ul>
            <li class="plate colA" data-a="Backquote">
              <div>~</div>
              <div>`</div>
            </li>
            <li class="plate colB" data-a="Digit1">
              <div>!</div>
              <div>1</div>
            </li>
            <li class="plate colB" data-a="Digit2">
              <div>@</div>
              <div>2</div>
            </li>
            <li class="plate colC" data-a="Digit3">
              <div>#</div>
              <div>3</div>
            </li>
            <li class="plate colC" data-a="Digit4">
              <div>$</div>
              <div>4</div>
            </li>
            <li class="plate colC" data-a="Digit5">
              <div>%</div>
              <div>5</div>
            </li>
            <li class="plate colD" data-a="Digit6">
              <div>^</div>
              <div>6</div>
            </li>
            <li class="plate colE" data-a="Digit7">
              <div>&</div>
              <div>7</div>
            </li>
            <li class="plate colF" data-a="Digit8">
              <div>*</div>
              <div>8</div>
            </li>
            <li class="plate colG" data-a="Digit9">
              <div>(</div>
              <div>9</div>
            </li>
            <li class="plate colG" data-a="Digit0">
              <div>)</div>
              <div>0</div>
            </li>
            <li class="plate colH" data-a="Minus">
              <div>_</div>
              <div>-</div>
            </li>
            <li class="plate colH" data-a="Equal">
              <div>+</div>
              <div>=</div>
            </li>
            <li class="plate colI" data-a="Backspace">
              <div>Backspace</div>
            </li>
          </ul>
        </div>
        <div class="f3">
          <ul>
            <li class="plate colA" data-a="Tab">Tab</li>
            <li class="plate colB" data-a="KeyQ">Q</li>
            <li class="plate colB" data-a="KeyW">W</li>
            <li class="plate colC" data-a="KeyE">E</li>
            <li class="plate colC" data-a="KeyR">R</li>
            <li class="plate colD" data-a="KeyT">T</li>
            <li class="plate colE" data-a="KeyY">Y</li>
            <li class="plate colF" data-a="KeyU">U</li>
            <li class="plate colG" data-a="KeyI">I</li>
            <li class="plate colG" data-a="KeyO">O</li>
            <li class="plate colH" data-a="KeyP">P</li>
            <li class="plate colH" data-a="BracketLeft">
              <div>{</div>
              <div>[</div>
            </li>
            <li class="plate colI" data-a="BracketRight">
              <div>}</div>
              <div>]</div>
            </li>
            <li class="plate colI" data-a="Backslash">
              <div>|</div>
              <div>\</div>
            </li>
          </ul>
        </div>
        <div class="f4">
          <ul>
            <li class="plate colA" data-a="CapsLock">CapsLk</li>
            <li class="plate colB" data-a="KeyA">A</li>
            <li class="plate colB" data-a="KeyS">S</li>
            <li class="plate colC" data-a="KeyD">D</li>
            <li class="plate colC" data-a="KeyF">F</li>
            <li class="plate colD" data-a="KeyG">G</li>
            <li class="plate colE" data-a="KeyH">H</li>
            <li class="plate colF" data-a="KeyJ">J</li>
            <li class="plate colG" data-a="KeyK">K</li>
            <li class="plate colH" data-a="KeyL">L</li>
            <li class="plate colH" data-a="Semicolon">
              <div>:</div>
              <div>;</div>
            </li>
            <li class="plate colI" data-a="Quote">
              <div>"</div>
              <div>'</div>
            </li>
            <li class="plate colI" data-a="Enter">Enter</li>
          </ul>
        </div>
        <div class="f5">
          <ul>
            <li class="plate colA" data-a="ShiftLeft">Shift</li>
            <li class="plate colB" data-a="KeyZ">Z</li>
            <li class="plate colC" data-a="KeyX">X</li>
            <li class="plate colC" data-a="KeyC">C</li>
            <li class="plate colD" data-a="KeyV">V</li>
            <li class="plate colE" data-a="KeyB">B</li>
            <li class="plate colF" data-a="KeyN">N</li>
            <li class="plate colG" data-a="KeyM">M</li>
            <li class="plate colH" data-a="Comma">
              <div><</div>
              <div>,</div>
            </li>
            <li class="plate colH" data-a="Period">
              <div>></div>
              <div>.</div>
            </li>
            <li class="plate colI" data-a="Slash">
              <div>?</div>
              <div>/</div>
            </li>
            <li class="plate colI" data-a="ShiftRight">Shift</li>
          </ul>
        </div>
        <div class="f6">
          <ul>
            <li class="plate colA" data-a="ControlLeft">Ctrl</li>
            <li class="plate colB" data-a="MetaLeft"><img src="./img/windows.png" alt="" /></li>
            <li class="plate colC" data-a="AltLeft">Alt</li>
            <li class="plate colE" data-a="Space"></li>
            <li class="plate colH" data-a="AltRight">Alt</li>
            <li class="plate colH" data-a="MetaRight"><img src="./img/windows.png" alt="" /></li>
            <li class="plate colH" data-a="ContextMenu"><img src="./img/文档.png" alt="" /></li>
            <li class="plate colI" data-a="ControlRight">Ctrl</li>
          </ul>
        </div>
      </div>
      <!-- 副键盘 -->
      <div class="subkey">
        <!-- 左边 -->
        <div class="left">
          <div>
            <ul>
              <li class="plate colI">PRTSC</li>
              <li class="plate colJ" data-a="ScrollLock">SCRLK</li>
              <li class="plate colJ" data-a="Pause">PAUSE</li>
            </ul>
          </div>
          <div>
            <ul>
              <li class="plate colI" data-a="Insert">INS</li>
              <li class="plate colJ" data-a="Home">HOME</li>
              <li class="plate colK" data-a="PageUp">PGUP</li>
            </ul>
          </div>
          <div>
            <ul>
              <li class="plate colI" data-a="Delete">DEL</li>
              <li class="plate colJ" data-a="End">END</li>
              <li class="plate colK" data-a="PageDown">PGUP</li>
            </ul>
          </div>
          <div>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div>
            <ul>
              <li></li>
              <li class="plate colJ" data-a="ArrowUp"><img src="./img/上箭头.png" alt="" /></li>
              <li></li>
            </ul>
          </div>
          <div>
            <ul>
              <li class="plate colJ" data-a="ArrowLeft"><img style="transform: rotateY(180deg)" src="./img/右箭头.png" alt="" /></li>
              <li class="plate colJ" data-a="ArrowDown"><img src="./img/下箭头.png" alt="" /></li>
              <li class="plate colK" data-a="ArrowRight"><img src="./img/右箭头.png" alt="" /></li>
            </ul>
          </div>
        </div>
        <!-- 右边 -->
        <div class="right">
          <!-- 指示灯 -->
          <div>
            <ul>
              <li class="indicator-num">
                <div class="active"></div>
                1
              </li>
              <li class="indicator-caps">
                <div></div>
                A
              </li>
              <li class="indicator-scroll">
                <div></div>
                W
              </li>
            </ul>
          </div>
          <!-- 按键 -->
          <div>
            <!-- 前3列 -->
            <div>
              <!-- 上面4行 -->
              <div>
                <div>
                  <ul>
                    <li class="plate colK" data-a="NumLock">NUM</li>
                    <li class="code colK" data-a="NumpadDivide">/</li>
                    <li class="code colL" data-a="NumpadMultiply">*</li>
                  </ul>
                </div>
                <div>
                  <ul>
                    <li class="code colK" data-a="Numpad7">7</li>
                    <li class="code colK" data-a="Numpad8">8</li>
                    <li class="code colL" data-a="Numpad9">9</li>
                  </ul>
                </div>
                <div>
                  <ul>
                    <li class="code colK" data-a="Numpad4">4</li>
                    <li class="code colK" data-a="Numpad5">5</li>
                    <li class="code colL" data-a="Numpad6">6</li>
                  </ul>
                </div>
                <div>
                  <ul>
                    <li class="code colK" data-a="Numpad1">1</li>
                    <li class="code colL" data-a="Numpad2">2</li>
                    <li class="code colL" data-a="Numpad3">3</li>
                  </ul>
                </div>
              </div>
              <!-- 包含0的一行 -->
              <div>
                <ul>
                  <li class="code colL" data-a="Numpad0">
                    <div>0</div>
                    <div>INS</div>
                  </li>
                  <li class="code colL" data-a="NumpadDecimal">
                    <div>.</div>
                    <div>DEL</div>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 包含加减的一列 -->
            <div>
              <ul>
                <li class="code colL" data-a="NumpadSubtract">-</li>
                <li class="code colL" data-a="NumpadAdd">+</li>
                <li class="code colL" data-a="NumpadEnter">Enter</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/键盘.js"></script>
</html>
